<template>
  <div class="dynamic-background">
    <div
      v-for="(circle, index) in circles"
      :key="index"
      class="circle"
      :style="circle.style"
    ></div>
    <div class="login-container">
      <h1 class="login-title">Login</h1>
      <form class="login-form" @submit.prevent="handleLogin">
        <input
          type="text"
          v-model="username"
          placeholder="Username"
          class="login-input"
        />
        <input
          type="password"
          v-model="password"
          placeholder="Password"
          class="login-input"
        />
        <button type="submit" class="login-btn">Login</button>
      </form>
    </div>
    <button class="regenerate-btn" @click="generateRandomCircles">
      Regenerate Background
    </button>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";

interface Circle {
  style: Record<string, string>;
}

const circles = ref<Circle[]>([]);
const username = ref("");
const password = ref("");

const generateRandomCircles = () => {
  const count = 20; // Number of circles
  const newCircles: Circle[] = [];
  for (let i = 0; i < count; i++) {
    const size = Math.random() * 100 + 20 + "px";
    newCircles.push({
      style: {
        width: size,
        height: size,
        top: Math.random() * 100 + "%",
        left: Math.random() * 100 + "%",
        animationDelay: Math.random() * 5 + "s",
        animationDuration: Math.random() * 10 + 5 + "s",
      },
    });
  }
  circles.value = newCircles;
};

const handleLogin = () => {
  console.log("Logging in with:", username.value, password.value);
};

onMounted(() => {
  generateRandomCircles();
});
</script>

<style lang="scss" scoped>
.dynamic-background {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: linear-gradient(120deg, #89f7fe, #66a6ff);
}

.circle {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  animation: float infinite ease-in-out;

  @keyframes float {
    0% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-20px);
    }
    100% {
      transform: translateY(0);
    }
  }
}

.login-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, 0.8);
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.login-title {
  font-size: 24px;
  margin-bottom: 20px;
  color: #333;
}

.login-form {
  display: flex;
  flex-direction: column;
}

.login-input {
  margin-bottom: 15px;
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.login-btn {
  padding: 10px 20px;
  background-color: #66a6ff;
  border: none;
  border-radius: 5px;
  color: white;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;

  &:hover {
    background-color: #89f7fe;
  }
}

.regenerate-btn {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 20px;
  background-color: #ffffff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s;

  &:hover {
    background-color: #f0f0f0;
  }
}
</style>
